window.addEventListener('DOMContentLoaded', function() {
    var le = this.document.querySelector('.le');
    var ri = this.document.querySelector('.ri');
    var ul = this.document.querySelector('ul');
    var imges = this.document.querySelectorAll('.img');
    var box = this.document.querySelector('.box');
    
    var dis = 0;
    var index = 0;// 当前显示的是第几个图
    // 设置元素组一个classname和其他所有classname
    var setIndexClass = function(objs, index, classNameCom, classNameSel) {
        for (var i = 0; i < objs.length; i++) objs[i].className = classNameCom;
        objs[index].className = classNameSel;
    }
    var toPre = function() {
        // console.log(index);
        if (dis == -2000) {
            dis = 0;
            index = -1;
        }else {
            dis -= 500;
        }
        ul.style.left = dis + 'px';
        index++;
        index = index == imges.length ? imges.length - 2 : index;
        setIndexClass(points, index, 'pointCom', 'pointSel');
    };
    var toNext = function() {
        // console.log(index);
        if (dis == 0) {
            dis = -2000;
            index = imges.length;
        }else {
            dis += 500;
        }
        ul.style.left = dis + 'px';
        index--;
        index = index < 0 ? 1 : index;
        setIndexClass(points, index, 'pointCom', 'pointSel');
    };
    box.addEventListener('mouseenter', function() {
        ri.style.display = 'block';
        le.style.display = 'block';
        // console.log('enter');
    })
    box.addEventListener('mouseleave', function() {
        ri.style.display = 'none';
        le.style.display = 'none';
        // console.log('out');
    })
    //添加圆点
    var pointBox = this.document.querySelector('.pointBox');
    for (var i = 0; i < imges.length; i++) {
        var newA = this.document.createElement('a');
        newA.className = 'pointCom';
        newA.href = 'javascript:;';
        pointBox.appendChild(newA);
    }
    var points = this.document.querySelectorAll('.pointCom');// 所有圆点
    //给每一个圆点添加事件
    for (var i = 0; i < points.length; i++) {
        points[i].index = i;
        points[i].addEventListener('click', function() {
            ul.style.left = -this.index * 500 + 'px';
            setIndexClass(points, this.index, 'pointCom', 'pointSel');
            // console.dir(ul.style.left );
        });
    }
    var cl = function() {
        clearInterval(box.timer);
        // console.log('clear');
    }
    var add = () => {
        cl();
        box.timer = this.setInterval(() => {
            toPre(); 
        }, 1000)
    }
    //初始化
    (function() {
        // 设置第一个圆点为红色
        setIndexClass(points, 0, 'pointCom', 'pointSel');
        add();
    })();
    box.addEventListener('mouseenter', cl);
    box.addEventListener('mouseleave', add);
    le.addEventListener('click', function() {
        if (this.flag) return;
        this.flag = true;
        toPre();
        this.flag = false;
    });
    ri.addEventListener('click', function() {
        if (this.flag) return;
        this.flag = true;
        toNext();
        this.flag = false;
    });
})